<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>收款码</title>
	<link rel="stylesheet" href="/component/pear/css/pear.css" />
	<style>
		.edit {
			position: absolute;
			bottom: 8px;
			right: 8px;
		}

		.layui-card {
			border-radius: 10px;
		}

		#mainbox {
			padding: 16px;
		}
	</style>
</head>

<body class="pear-container">
	<div class="layui-row" id="mainbox">
		<!-- 通道列表 -->
	</div>
	<script src="/component/layui/layui.js"></script>
	<script src="/component/pear/pear.js"></script>
	<script src="/static/js/awesome-qr.min.js"></script>
	<script>
		const QR = AwesomeQR.AwesomeQR;
		layui.use(['form', 'common'], function () {
			let form = layui.form;
			let util = layui.util;
			let common = layui.common;
			let layer = layui.layer;

			util.on({
				getQrcode: function () {
					(async () => {
						const type_data = this.getAttribute("data-type");
						const qrcode_data = this.getAttribute("data-qrcode")
						if (type_data == 1) {
							layer.open({
								type: 1,
								area: ['200px', '200px'],
								title: false,
								closeBtn: 0,
								shadeClose: true,
								content: `<img width="100%" src="${qrcode_data}">`
							});
						} else if (type_data == 0) {
							const qrcode_img = await getQrcode(qrcode_data, QR);
							layer.open({
								type: 1,
								area: ['200px', '200px'],
								title: false,
								closeBtn: 0,
								shadeClose: true,
								content: `<img width="100%" src="${qrcode_img}">`
							});
						}
					})()
				},
				edit: function () {
					const cid = this.getAttribute("data-cid");
					layer.open({
						id: 'iframe-channel-edit',
						type: 2,
						title: '修改终端',
						shade: 0.1,
						area: [common.isModile() ? '80%' : '400px', common.isModile() ? '70%' : '300px'],
						content: `/PayManage/editChannel?cid=${cid}`,
					});
				},
				add: function () {
					const aid = this.getAttribute("data-aid")
					layer.open({
						id: 'iframe-channel-add',
						type: 2,
						title: '添加收款码',
						shade: 0.1,
						area: [common.isModile() ? '80%' : '400px', common.isModile() ? '70%' : '300px'],
						content: `/PayManage/addChannel?aid=${aid}`,
					});
				},
				delete: function () {
					const cid = this.getAttribute("data-cid");
					layer.confirm('确定删除终端?', { icon: 3, title: '提示' },
						function (index) {
							fetch('/api/PayManage/delChannel', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: cid }) })
								.then(res => res.json())
								.then(res => {
									if (res.code === 0) {
										layer.msg(res.msg, { icon: 1, time: 1200 }, function () {
											location.reload();
										});
									} else {
										layer.msg(res.msg, { icon: 2, time: 1200 });
									}
								})
							layer.close(index);
						});
				},
			});
			// 工具
			let channel = {};

			channel.buildEle = function (item) {
				let card = document.createElement('div');
				card.className = 'layui-card';
				const qrcode = item.qrcode.length > 50 ? item.qrcode.slice(0, 50) + '...' : item.qrcode;
				let htmlstr = `
				<div class="layui-card-body">
					<span class="layui-badge layui-bg-cyan">终端编号</span><span class="layui-badge layui-bg-gray">${item.channel}</span><br>
					<span class="layui-badge layui-bg-cyan">收款地址</span><span class="layui-badge layui-bg-gray">${qrcode}</span>
					<a href="javascript:;" class="layui-font-blue" lay-on="getQrcode" data-qrcode="${item.qrcode}" data-type="${item.type}"><span class="icon pear-icon">&#xe6cc;</span></a><br>
					<span class="layui-badge layui-bg-cyan">最后使用</span><span class="layui-badge layui-bg-gray">${item.last_time}</span><br>
					<span class="layui-badge layui-bg-cyan">启用状态</span><span class="layui-badge layui-bg-${item.state == 1 ? 'green' : 'gray'}">${item.state == 1 ? '启用' : '禁用'}</span><br>
					<div class="layui-btn-group edit">
						<button class="layui-btn layui-btn-primary layui-btn-sm" lay-on="edit" data-cid="${item.id}"><span class="icon pear-icon">&#xe693;</span></button>
						<button class="layui-btn layui-btn-primary layui-btn-sm" lay-on="delete" data-cid="${item.id}"><span class="icon pear-icon">&#xe66b;</span></button>
					</div>
				</div>`;
				card.innerHTML = htmlstr;
				return card;
			}
			channel.getChannelLlist = async function (mainbox, aid) {
				const url = '/api/PayManage/getChannelList';
				const info = { aid: aid };
				const res = await fetch(url, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(info) });
				if (res.status !== 200) {
					layer.msg('请求失败，请重试！', { tips: 2, time: 1200 });
					return false;
				}
				const rec_info = await res.json();
				if (rec_info.code === 0) {
					const lists = rec_info.data;
					lists.forEach(value => {
						const card = channel.buildEle(value);
						mainbox.appendChild(card);
					});
					channel.addBtn(mainbox, aid);
				} else {
					layer.msg(rec_info.msg, { icon: 2, time: 1200 });
				}
			}
			channel.addBtn = function (mainbox, aid) {
				let btn = document.createElement('div');
				btn.className = 'layui-card';
				btn.innerHTML = `<button type="button" lay-on="add" data-aid="${aid}" class="layui-btn layui-btn-fluid">添加收款码</button>`;
				mainbox.appendChild(btn);
			}
			// 生成二维码
			async function getQrcode(text, QR) {
				const qrcodeUrl = await new Promise((resolve) => {
					new QR({
						text: text,
						size: 500,
					}).draw().then((dataURL) => { resolve(dataURL); });
				})
				return qrcodeUrl;
			}

			const mainbox = document.getElementById('mainbox');
			const aid = '<?php echo $id ?>';
			channel.getChannelLlist(mainbox, aid);
		})
	</script>
</body>

</html>